# 消息提醒

Umo Editor 采用[TDesign Vue Next](https://tdesign.tencent.com/vue-next/overview)作为基础组件库，为了方便开发者使用，对外提供了封装的 Alert，Confirm，Message 等常用消息提醒组件的方法。您可以访问[https://demo.umodoc.com/editor?pane=events&lang=zh-CN](https://demo.umodoc.com/editor?pane=events&lang=zh-CN)，点击对应的按钮查看示例。

## 示例
```vue
<template>
  <umo-editor
    ref="editorRef"
    v-bind="options"
  />
  <button @click="useAlert">useAlert</button>
  <button @click="useConfirm">useConfirm</button>
  <button @click="useMessage">useMessage</button>
</template>
 
<script setup>
  import { ref } from 'vue';
  import { UmoEditor } from '@umoteam/editor';

  const editorRef = ref(null);
  const options = ref({
    // 配置项
    // ...
  })

  // 使用 Alert
  const useAlert = () => {
    editorRef.value.useAlert({
      theme: 'success',
      header: 'Info',
      body: 'Hello World',
    })
  }

  // 使用 Confirm
  const useConfirm = () => {
    const confirm = editorRef.value.useConfirm({
      theme: 'success',
      header: 'Info',
      body: 'Hello World',
      onConfirm() {
        confirm.destroy()
      },
    })
  }

  // 使用 Message
  const useMessage = () => {
    editorRef.value.useMessage('info', 'Hello World')
  }
</script>
```

## 组件使用说明

### useAlert

Alert 对话框组件，详见[https://tdesign.tencent.com/vue-next/components/dialog?tab=api](https://tdesign.tencent.com/vue-next/components/dialog?tab=api)。

### useConfirm

Confirm 对话框组件，详见[https://tdesign.tencent.com/vue-next/components/dialog?tab=api](https://tdesign.tencent.com/vue-next/components/dialog?tab=api)。

### useMessage

Message 组件，详见[https://tdesign.tencent.com/vue-next/components/message?tab=api](https://tdesign.tencent.com/vue-next/components/message?tab=api)。